<template>
<!--team_confirm.wxml-->
<form @submit="submitForm">
<view class="container">
    <view class="user-mes" @tap="enterAddressPageFun">
       
        <view class="location">
           <block v-if="address.province_name">
            <view class="user-contact">{{address.consignee}}{{'　　'}}{{address.mobile}}</view>
            <view class="address">{{address.province_name + address.city_name + address.district_name + (address.twon_name?address.twon_name:'') + address.address}}</view>            
            </block>            
            <block v-else>
                <view class="user-contact"></view> 
                <view class="address">请填写收货地址</view>    
            </block>            

        </view>
        <view class="border-img"><image class="wh100" src="/static/images/tt.png"></image></view>
        <view class="update-logistics">
           
        </view>
    </view>
    <!-- 商品列表 -->
    <view class="order-meg">
        <view class="store-list">
            <view class="order-detail">
                <view class="goods-img">
                <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + goods.goods_id + '&width=100&height=100'"></image>
                </view>
                <navigator class="order-cont" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + goods.goods_id">
                    <view class="goods-name ellipsis-2">{{goods.goods_name}}</view>
                    <view class="goods-color ellipsis-1">{{goods.spec_key_name}}</view>
                </navigator>
                <view class="order-num">
                    <view class="co-red">￥{{goods.member_goods_price}}</view>
                    <view v-if="!optionOrderPay" class>
                        <!-- <view bindtap="reduce">-</view>
                        <input type="number" value="{{goodsInputNum}}" bindblur="inputNum"/>
                        <view bindtap="add">+</view> -->
                        x{{goodsInputNum}}
                    </view>
                </view>
            </view>
            <view class="set-mes">
                <view v-if="!optionOrderPay" class="set-item" @tap="useCoupon" :data-idx="index">
                    <view class="coupon">
                        <view>优惠券</view>
                        <view class="coupon-num">{{coupons ? coupons.length : 0}}张可用</view>
                    </view>
                    <view class="set-btn">
                        <view>{{coupon ? coupon.name : '未使用'}}</view>
                        <image class="arrow-rigth" src="/static/images/icon-arrowdown.png"></image>
                    </view>
                </view>
                <view class="set-item">
                     <view>备注：</view>
                     <textarea name="user_note" class="word-box" maxlength="30" placeholder="选填,最多30个字" @input="keyUpChangeNum"></textarea>
                </view>
            </view>
        </view>
    </view>
    <!-- 使用其他支付 -->
    <view class="set-mes">   
        <view class="use-item" v-if="userInfo.pay_points >0">
            <view>使用积分 ：</view>
            <view style="color:#999;font-size:24rpx;">可用:{{userInfo.pay_points || 0}}</view>
            <!-- <input type="number" name="pay_points" value="{{pay_points_val}}" maxlength="20" placeholder="可用积分为:{{userInfo.pay_points || 0}}" /> -->
            <view class="fr user_pay_points">
                <switch @change="user_pay_points"></switch>
            </view>
            <!-- <button class="use-btn" form-type="submit">使用</button> -->
        </view>      
    </view>
    <!-- 价格栏 -->
    <view class="information">
        <view class="item">
            <view>订单号</view>
            <view class="co-red">{{optionOrderSn}}</view>  
        </view>
        <view class="item">
            <view>商品总价</view>
            <view class="co-red">￥ {{order.goods_price}}元</view>
        </view>
        <view class="item" v-if="order.shipping_price > 0">
            <view>运费</view>
            <view class="co-red">￥ {{order.shipping_price}}元</view>  
        </view>
        <view class="item">
            <view>订单总价</view>
            <view class="co-red">￥ {{order.total_amount}}元</view>  
        </view>
        <view class="item" v-if="order.coupon_price > 0">
            <view>优惠券</view>
            <view class="co-red">- ￥ {{order.coupon_price}}元</view>  
        </view>
        <view class="item" v-if="order.user_money > 0">
            <view>使用余额</view>
            <view class="co-red">- ￥ {{order.user_money}}元</view>  
        </view>
        <view class="item" v-if="order.integral_money > 0">
            <view>使用积分</view>
            <view class="co-red">- ￥ {{order.integral_money}}元</view>  
        </view>
    </view>
    <view class="btn-wrap">  
        <button form-type="submit" class="tips-btn" id="submitOrder">提交订单</button>
        <view class="pay-amount">
            <view class="payable">应付金额 : </view>
            <view class="co-red">￥ {{order.order_amount}}元</view>  
        </view>
    </view>
</view>
</form>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var util = require("../../../utils/util.js");
var common = require("../../../utils/common.js");
var md5 = require("../../../utils/md5.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      optionOrderPay: false,
      //是否是订单支付
      optionOrderSn: '',
      //订单sn
      address: null,
      mOrder: null,
      //原始订单数据(用来判断该订单是否已经选择了地址)
      order: null,
      //请求的订单数据
      goods: null,
      coupons: null,
      //可用的优惠券
      userInfo: null,
      //用户信息
      maxWord: 0,
      enterAddressPage: false,
      available_integral: 0,
      //使用的积分
      firstEnter: true,
      //是否第一次进入页面
      coupon: null,
      //已使用的优惠券
      goodsInputNum: 1,
      //商品数量
      formData: {
        pay_points: '',
        user_money: '',
        user_note: ''
      },
      foundId: 0,
      pay_points_val: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    var orderPay = typeof options.orderPay == 'undefined' ? false : options.orderPay;
    var orderSn = typeof options.orderSn == 'undefined' ? '' : options.orderSn;
    var foundId = typeof options.found_id == 'undefined' ? '' : options.found_id;
    this.setData({
      foundId: foundId,
      optionOrderPay: orderPay,
      optionOrderSn: orderSn,
      userInfo: uni.getStorageSync('app:userInfo')
    });
    this.requestTeamOrder(); //加载积分使用配置

    app.globalData.getConfig(function (res) {
      var is_use = common.getConfigByName(res.config, 'is_use_integral');

      if (0 == is_use) {
        that.setData({
          'userInfo.pay_points': 0
        });
      }
    });
  },
  //重新加载数据
  onShow: function () {
    this.setData({
      order: this.order
    });

    if (this.enterAddressPage) {
      this.enterAddressPage = false;
      var address = uni.getStorageSync('team:confirm:address');

      if (address !== '') {
        uni.removeStorageSync('team:confirm:address');
      }

      this.requestTeamOrder(address); //改变地址要重新请求数据
    } else if (!this.firstEnter && this.checkAddressList()) {
      var conponUse = uni.getStorageSync('team:confirm:cid');
      this.setData({
        coupon: conponUse
      });
      this.calculatePrice();
    }

    this.firstEnter = false;
  },
  methods: {
    /** 获取用户收货地址 */
    getDefaultAddress: function () {
      var that = this;
      request.get('/api/User/ajaxAddressList', {
        success: function (res) {
          var address = res.data.result.length > 0 ? res.data.result[0] : null;
          that.setData({
            'address': address
          });

          if (that.checkAddressList()) {
            that.calculatePrice();
          }
        }
      });
    },
    requestTeamOrder: function (address) {
      var that = this;
      var data = {
        order_sn: this.optionOrderSn
      };
      request.get('/api/Team/order', {
        failRollback: true,
        data: data,
        success: function (res) {
          var result = res.data.result;
          that.setData({
            mOrder: result.order
          });
          that.setData({
            order: result.order
          });
          that.setData({
            goods: result.order_goods
          });
          that.setData({
            goodsInputNum: result.order_goods.goods_num
          });
          that.setData({
            coupons: result.userCartCouponList
          }); // that.setData({ userInfo: result.userInfo });

          if (address) {
            that.setData({
              'address': address
            });

            if (that.checkAddressList()) {
              that.calculatePrice();
            }
          } else {
            that.getDefaultAddress();
          }
        },
        failStatus: function (res) {
          if (res.data.status == 0) {
            uni.showModal({
              title: res.data.msg,
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  that.enterAddressPageFun();
                } else {
                  uni.navigateBack();
                }
              },
              fail: function () {
                uni.navigateBack();
              }
            });
          }

          if (res.data.status == -1) {
            app.globalData.showTextWarining(res.data.msg, function () {
              uni.setStorageSync('team:order_list:update', true);
              uni.navigateBack({
                dateil: 1
              });
            });
          }

          return false;
        }
      });
    },

    /** 检查是否已经选了地址 */
    checkAddressList: function () {
      var that = this;
      console.log(that.address);

      if (that.address == null) {
        uni.showModal({
          title: '请先填写或选择收货地址~',
          success: function (res) {
            if (res.confirm) {
              that.enterAddressPageFun();
            } else {
              uni.navigateBack();
            }
          },
          fail: function () {
            uni.navigateBack();
          }
        });
        return false;
      }

      return true;
    },
    keyUpChangeNum: function (e) {
      this.setData({
        maxWord: e.detail.value.length
      });
    },

    /** 减少购买的商品数量 */
    reduce: function () {
      var num = this.goodsInputNum - 1;

      if (num < 1) {
        num = 1;
      }

      this.setData({
        goodsInputNum: num
      });
      this.calculatePrice();
    },

    /** 增加购买的商品数量 */
    add: function () {
      var num = this.goodsInputNum + 1;
      this.setData({
        goodsInputNum: num
      });
      this.calculatePrice();
    },

    /** 输入购买的数量 */
    inputNum: function (e) {
      var num = Number(e.detail.value);

      if (num < 1) {
        num = 1;
      }

      this.setData({
        goodsInputNum: num
      });
      this.calculatePrice();
    },

    /** 请求计算价格，无入参则使用已保存的参数 */
    calculatePrice: function () {
      var that = this;
      var formData = that.formData;
      var postData = {
        address_id: that.address.address_id,
        order_id: that.order.order_id,
        goods_num: that.goodsInputNum,
        coupon_id: that.coupon ? that.coupon.id : '',
        user_note: formData.user_note,
        pay_points: formData.pay_points ? formData.pay_points : that.available_integral,
        user_money: formData.user_money ? formData.user_money : 0
      };
      request.get('/api/Team/getOrderInfo', {
        data: postData,
        success: function (res) {
          var result = res.data.result;
          that.setData({
            order: result.order
          });
          that.setData({
            goods: result.order_goods
          });
          that.setData({
            coupons: result.couponList
          });

          if (result.order.integral_msg) {
            app.globalData.showTextWarining(result.order.integral_msg);
            that.setData({
              pay_points_val: result.order.total_amount * result.order.point_rate * (result.order.proportion / 100)
            });
          }
        }
      });
    },

    /** 提交订单 */
    submitForm: function (e) {
      var that = this;
      var formData = e.detail.value;
      this.formData = formData;

      if (e.detail.target.id != 'submitOrder') {
        this.calculatePrice();
        return;
      }

      var postData = {
        address_id: this.address.address_id,
        order_id: this.order.order_id,
        goods_num: this.goodsInputNum,
        coupon_id: this.coupon ? this.coupon.id : '',
        user_note: formData.user_note,
        pay_points: formData.pay_points ? formData.pay_points : that.available_integral,
        user_money: formData.user_money ? formData.user_money : 0,
        act: 'submit_order'
      };
      request.post('/api/Team/getOrderInfo', {
        data: postData,
        success: function (res) {
          console.log(that.foundId);
          var result = res.data.result;

          if (result.order_amount <= 0) {
            uni.setStorageSync('team:order_list:update', true);
            uni.redirectTo({
              url: '/pages/payment/payment/payment?order_sn=' + that.optionOrderSn + '&order_amount=' + that.order.total_amount + '&order_type=6' + '&order_id=' + that.order.order_id + '&found_id=' + that.foundId
            });
          } else {
            var params = {
              order_sn: that.optionOrderSn,
              order_type: 6,
              order_id: that.order.order_id,
              found_id: that.foundId
            };
            var url = '/pages/cart/cart4/cart4?' + util.Obj2Str(params);
            uni.redirectTo({
              url: url
            });
          }
        },
        failStatus: function (res) {
          if (res.data.status == -1) {
            uni.showModal({
              title: '请先设置支付密码',
              success: function (res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: '/pages/user/userinfo/userinfo'
                  });
                } else {
                  uni.navigateBack();
                }
              },
              fail: function () {
                uni.navigateBack();
              }
            });
          }
        }
      });
    },

    /** 使用优惠券 */
    useCoupon: function (e) {
      var num = this.coupons ? this.coupons.length : 0;

      if (num <= 0) {
        return app.globalData.showTextWarining("无可用优惠券");
      }

      var params = {
        lid: this.coupon ? this.coupon.id : '0'
      };
      uni.navigateTo({
        url: '/pages/team/team_coupon/team_coupon?' + util.Obj2Str(params)
      });
    },
    enterAddressPageFun: function () {
      if (this.optionOrderPay && this.mOrder.province != 0) {
        //订单支付并且之前已经选择地址
        return;
      }

      this.enterAddressPage = true;
      uni.navigateTo({
        url: '/pages/user/address_list/address_list?operate=teamSelect'
      });
    },
    //使用积分
    user_pay_points: function (d) {
      var e = Object();

      if (d.detail.value) {
        e.pay_points = this.userInfo.pay_points;
      } else {
        e.pay_points = 0;
      }

      this.setData({
        available_integral: e.pay_points,
        formData: e
      });
      this.calculatePrice();
    }
  }
};
</script>
<style>
/* team_confirm.wxss */
.user-mes{
    position: relative;
    background-color: #fff;
    font-size: 32rpx;
    color: #444;
}
.user-contact{
    padding: 0 60rpx 24rpx 30rpx;
    color: #333333;
    font-size: 30rpx;
    font-weight: 500;
}
.location{
    position: relative;
    background-color: #fff;
    font-size: 32rpx;
    color: #333;
    padding-top: 24rpx;
}
.address{
  color: #999999;
  font-size: 26rpx;
  line-height: 40rpx;
  height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 60rpx 26rpx 30rpx;
}
.pos-icon{
    position: absolute;
    left: 30rpx;
    top: 0;
    width: 32rpx;
    height: 32.5rpx;
    margin-top:48rpx
}
.border-img{
    width: 100%;
    height: 16rpx;
    font-size: 0;
}
.update-logistics{
    position: absolute;
    right: 30rpx;
    top: 40rpx;
    width: 18rpx;
    height: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3rpx solid #B9B9B9;
    border-right: 3rpx solid #B9B9B9;
    transform: rotate(45deg);
}
.arrow-rigth{
    width: 32rpx;
    height: 32rpx; 
}
.order-meg{
    font-size: 28rpx;
}
.order-detail{
    padding: 30rpx 0;
    color: #777;
    min-height: 150rpx;
    background-color:#f8f8f8;
    margin-bottom: 10rpx;
}
.goods-img{
    float: left;
    width: 150rpx;
    height: 150rpx;
    margin:0 20rpx; 
}
.order-cont{
    float: left;
    width: 400rpx;
}
.goods-name{
    max-height: 72rpx;
    line-height: 36rpx;
    overflow: hidden;
    margin-bottom: 16rpx;
}
.goods-color{
    font-size: 24rpx;
}
.order-num{
    float: right;
    font-size: 24rpx;
    margin-top: 10rpx;
    margin-right: 20rpx;
    text-align: right;
    line-height: 42rpx;
    width: 140rpx;
}
.goods-num{
    display: flex;
    margin-top: 12rpx;
    width: 136rpx;
    border:1px solid #f3f3f3;
    height: 50rpx;
    font-size: 24rpx;
    text-align: center;
}
.goods-num>view{
    width: 44rpx;
    line-height: 50rpx;
    color: #666;
}
.goods-num>input{
    width: 44rpx;
    height: 42rpx;
    border-left:1px solid #f3f3f3;
    border-right:1px solid #f3f3f3;
}
.set-mes{
    background-color: #fff;
    padding: 0 20rpx;
    font-size: 30rpx;
    color: #444;
}
.set-mes>view{
    display: flex;
    align-items: center;
    height: 92rpx;
    border-bottom: 1px solid #f3f3f3;
}
.set-item{
    justify-content: space-between;
}
.set-btn{
    display: flex;
    font-size: 24rpx;
}
.set-mes input{
    width: 380rpx;
    height: 50rpx;
    line-height: 50rpx;
    border:1px solid #f3f3f3;
}
.use-btn{
    width: 100rpx;
    height: 50rpx;
    margin-left: 20rpx;
    line-height: 50rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
}
.coupon-num{
    height: 36rpx;
    margin-left: 20rpx;
    padding: 0 16rpx;
    line-height: 36rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    font-size: 24rpx;
}
.word-box{
    width: 600rpx;
    height: 40rpx;
    line-height: 40rpx;
}
.information{
    padding: 0 20rpx;
    background-color: #fff;
    margin: 20rpx 0;
}
.information .item{
    display: flex;
    justify-content: space-between;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #777;
}
.btn-wrap{
    height: 100rpx;
    background-color: #fff;
}
.tips-btn{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    background-color: #ff6a00;
}
.pay-amount{
    float: right;
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 26rpx;
    margin-right: 40rpx;
}
.payable{
    color: #444;
    margin-right: 20rpx;
}
/* 物流列表弹框 */
.shipping-modal{
    z-index: 20;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: hidden;
    color: #666666;
    background-color: white;
}
.shipping-nav{
    text-align: center;
    font-size: 35rpx;
    padding-top: 30rpx;
}
.shipping-list{
    padding: 20rpx 30rpx 40rpx;
    font-size: 28rpx;
}
.shipping-item{
    display: block;
    padding: 20rpx 0;
}
.shipping-btn{
    width: 100%;
    color: white;
    background-color: #ff6a00;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
}
.store-list{
    background-color: #fff;
    margin-bottom: 20rpx;
}
.coupon{
    display: flex;
}
.totle-weight{
    padding-right: 20rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: right;
}
switch .wx-switch-input{
    height: 42rpx;
    border-radius: 4rpx;
}
switch .wx-switch-input::before,switch .wx-switch-input::after{
    height: 40rpx;
    border-radius: 4rpx;
}
.user_pay_points{
  position: absolute;
  right: 20rpx;
}

</style>